<template>
  <div class="manager-detail__top">
    <div class="jydw-title">{{ $dictValue("{name}") }}总管理员</div>
    <tx-detail v-loading="loading">
      <tx-block>
        <el-form
          ref="form"
          :model="form"
          :rules="formRules"
          :hide-required-asterisk="hideRequiredAsterisk"
        >
          <el-row><el-col :span="6">
              <tx-form-input
                label-width="40px"
                label="姓名:"
                :entity="form"
                name="name"
                :placeholder="$dictValue('请输入总管理员姓名')"
                :action="formConfig.action" /></el-col
            ><el-col :span="6">
              <tx-form-input
                label-width="60px"
                label="单位:"
                :entity="form"
                name="workUnit"
                :placeholder="$dictValue('请输入总管理员单位名称')"
                :action="formConfig.action"
                :readonly="false"
            /></el-col
            ><el-col :span="6"><tx-form-input
                label-width="60"
                label="职务:"
                :entity="form"
                name="job"
                :placeholder="$dictValue('请输入总管理员职务')"
                :action="formConfig.action" /></el-col
            ><el-col :span="6">
              <tx-form-input
                label-width="80"
                label="联系电话:"
                :entity="form"
                name="phone"
                :placeholder="$dictValue('请输入总管理员11位手机号')"
                :action="formConfig.action" /></el-col
          ></el-row>
        </el-form>
      </tx-block>
      <div slot="button">
        <div style="text-align;:right">
          <tx-button-save
            name="编辑"
            @click="handleFormAction('modify')"
            v-if="formConfig.action == 'view' && !$currentUserInfo"
          />
          <tx-button-save
            name="保存"
            @click="$handleFormValidate('form', handleSave)"
            v-if="formConfig.action == 'modify'"
          />
          <tx-button-return
            name="取消"
            @click="handleFormAction('view')"
            :close="false"
            v-if="formConfig.action == 'modify'"
          />
        </div>
      </div>
    </tx-detail>
    <validate-phone
      @success="SubmitEvent"
      :form="form"
      ref="validatePhone"
    ></validate-phone>
  </div>
</template>

<script>
// import DetailEvent from "./DetailEvent.js";
// import PartsModifyMixin from "./mixins/PartsModifyMixin.js";
// import store from './store/index.js'
import dbl from "@/utils/dbl";

let dicts = {
  1000000001: { name: "党委管理员", workUnit: "党委领导" },
  1000000002: { name: "政府管理员", workUnit: "政府领导" },
  1000000010: { name: "救援队伍", workUnit: "救援队伍" },
  1000000011: { name: "应急物资", workUnit: "应急物资" },
  1000000012: { name: "防护目标", workUnit: "防护目标" },
  1000000013: { name: "专家库", workUnit: "专家库" },
  1000000014: { name: "避难场所", workUnit: "避难场所" },
};

export default {
  mixins: [],
  props:{
    userInfo: () =>{
      return {}
    }
  },
  data() {
    return {
      hideRequiredAsterisk: true,
      loading: false,
      dict: dicts[this.getParameter("menuId")],
      form: {
        id:"",
        name: "",
        workUnit: "",
        job: "",
        phone: "",
      },
      formOrigin: {
        id:"",
        name: "",
        workUnit: "",
        job: "",
        phone: "",
      },
      formConfig: {
        action: "view",
      },
      formRules: {
        name: this.$rule.name("姓名", null, 32),
        workUnit: this.$rule.name("单位", null, 32),
        job: this.$rule.name("职务", null, 32),
        phone: this.$rule.mobile("手机号", true),
      },
      vehicle: {
        dialog: {
          visible: false,
          title: "biaoti",
          width: "600px",
        },
        tree: [],
        selected: [],
      },
      typeOptions: {
        adapter: (e) => {
          return { label: e.name, value: e.partsTypeId };
        },
        values: [],
      },
    };
  },
 
  components: {},

  created() {},
  mounted() {
    this.loadEntity();
  },
  methods: {
    // 保存
    handleSave() {
      let { id, phone } = this.form;
      this.$handleFormValidate(`form`, async () => {
        if (
          (id && this.formOrigin.phone != phone) ||
          !id
        ) {
          //新增或者编辑状态下有修改手机号，则弹窗校验手机号
          let res = await this.$existAd(id, phone);
          if (res?.data) {
            this.$refs.validatePhone.init();
            return false;
          }
        }
        this.SubmitEvent();
      });
    },
    SubmitEvent() {
      this.loading = true;
      let { id, name, workUnit, job, phone } = this.form;
      let pack = {};
      if (id) {
        pack.body = {
          id,
          name,
          workUnit,
          job,
          phone,
        };
      } else {
        pack.body = {
          name,
          workUnit,
          job,
          phone,
          menuID: this.getParameter("menuId"),
          areaCode: this.$userInfo.areaCode,
          createdBy: this.$userInfo.phone,
        };
      }
      let newMethod = this.$api.AdminController.new;
      let updateMethod = this.$api.AdminController.update;
      this.$invokeSave(pack, "id", newMethod, updateMethod, (res) => {
        this.loading = false;
        if (res && res.data) {
          this.formConfig.action = "view";
          this.form.id = res.data;
          this.loadEntity()
        }
      });
    },
    handleFormAction(action) {
      if (action == "view" && this.formConfig.action != action) {
        Object.assign(this.form, this.formOrigin);
      }
      if (action == "modify" && this.formConfig.action != action) {
        Object.assign(this.formOrigin, this.form);
      }
      this.formConfig.action = action;
    },
    handleModify() {
      Object.assign(this.formOrigin, this.form);
      this.formConfig.action = "modify";
    },
    loadEntity() {
      let menuId = this.getParameter("menuId");
      if (!menuId) {
        console.log("menuId should not be empty!");
        return;
      }

      const userInfo = this.$store.getters["user/userInfo"];
      let param = {
        body: {
          // menuId: menuId,
          menuID: menuId,
          createdBy: this.$currentUserInfo?.phone ||userInfo.phone,
          orgId : this.$currentUserInfo?.orgId || this.$userInfo.orgId
        },
      };

      this.loading = true;
      return this.$api.AdminController.list(param).then((res) => {
        this.loading = false;
        if (res && res.data) {
          if (res.data.length > 0) {
            let redBody = res.data[0];
            this.form.name = redBody.name;
            this.form.job = redBody.job;
            this.form.phone = redBody.phone;
            this.form.id = redBody.id;
            this.form.workUnit = redBody.workUnit;
            this.form.orgId = redBody.orgId;
            this.$emit("getUserInfo", this.form)
          } else {
            !this.$currentUserInfo && this.handleModify();
          }
        } else {
          this.$message.error("服务端返回的数据有误");
        }
      });
    },
  },
};
</script>

<style lang="scss">
@import "@/style/variables.scss";
.manager-detail__top {
  margin-bottom: 20px;
  .tx-detail {
    padding: 0px 0px !important;
    justify-content: left;
  }

  .jydw-title {
    font-size: 18px;
    background: url(../../../../assets/tongji/title.png) left no-repeat;
    background-size: 24px 24px;
    text-indent: 25px;
    color: #4af6fc;
    margin-left: 30px;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 0px 0;
  }
  border: 1px solid rgba(61, 126, 165, 0.5);
  background: linear-gradient(0deg, #0b3e66 0%, #1c5280 100%);

  .tx-detail {
    .tx-block {
      padding: 0px;
    }
    .tx-block--content {
      padding: 0px 20px 0px 0px;
      display: flex;
      justify-content: left;
      align-items: center;
    }
    .detail__buttons {
      //   padding: 30px 220px 10px 0px !important;
      display: block !important;
      text-align: right;
      padding: 0px 0px 20px 0px !important;
      position: absolute;
      top: 15px;
      right: 40px;
    }
  }
  &__title {
    color: $c-font-table;
    background: linear-gradient(
      90deg,
      rgba(23, 79, 128, 0) 0%,
      rgba(56, 119, 175, 0.4) 50%,
      rgba(23, 79, 128, 0) 100%
    );
    padding: 15px 220px 15px 0px;
    text-align: center;
    font-size: 18px;
  }
  .el-form-item__label {
    width: 120px !important;
    color: $c-font-table;
  }
  .el-form-item__content {
    width: auto !important;
    color: $c-font-table;
  }

  .el-form {
    margin: 0px 0px !important;
    width: 80% !important;
    .el-row {
      padding: 0px !important;
    }
  }

  .el-input-group__prepend {
    padding: 0px 10px;
  }
  .el-input-group--prepend {
    width: 200px;
  }
  .el-input-group .el-input__inner {
    text-align: right;
  }
  .el-button {
    margin: 0px 10px;
  }
}
</style>
